import React, {Component} from 'react';
import {StyleSheet, Text, View,Image,
 TouchableOpacity,FlatList
} from 'react-native';
import RefreshListView, {RefreshState} from 'react-native-refresh-list-view';
import {addByTransDate,reduceByTransDate,getCurrentDate} from '../../common/common'
import BASEURL from '../../api/api'
import Item from './Item'
import SearchView from '../../common/SearchView'
import Loading from '../../common/Loading'
var noMore = false;
var pageNo = 0;
var pageSize = 10;
export default class Newest extends Component{
  constructor(props){
    super(props);
    let time = getCurrentDate()
    this.state = ({
      loading:true,
      flowList:[],
      hyName:'',
      date:time,
    })
    //console.log(this.props)
  }
  componentWillMount(){
    this.getFlowList(1)
  }
  onHeaderRefresh = () => {
  }
  onFooterRefresh = () => {
  	pageNo++;
  	this.getFlowList(pageNo);
    this.setState({refreshState: RefreshState.FooterRefreshing});
  }
  //获取 历史监测数据
  getFlowList(page){
    fetch(BASEURL+'getFlowListTimeAreaCode?areaCode='+this.props.areaCode
      +'&areaName='+this.state.hyName+'&pageSize='+pageSize+'&pageNo='+page)
    .then(res=>res.json())
    .then(result=>{
      console.log('res',result)
      if(result.falg){
        // this.setState({
        //   flowList:result.flowList,
        //   loading:false,
        // })
        if(result.flowList.length<pageSize){
          this.setState({
            flowList:this.state.flowList.concat(result.flowList),
            loading:false,
            refreshState: RefreshState.NoMoreData,
          })
        } else {
          this.setState({
            flowList:this.state.flowList.concat(result.flowList),
            loading:false,
            refreshState: RefreshState.Idle,
          })
        }
      } else {
        this.setState({
          loading:false,
          refreshState:RefreshState.NoMoreData,
        })
      }
    })
  }
  //渲染索引条
  renderIndexLab(){
    return(
      <View style={{flexDirection:'row',alignItems:'center',paddingLeft:20,paddingTop:8,paddingBottom:5}}>
        <Text onPress={()=>{this.setState({type:0})}}>实时监测</Text>
      </View>
    )
  }
  searchFlowList(value){
    // console.log('value',value)
    this.setState({
      hyName:value,
      flowList:[]
    })
    //监测搜索
    setTimeout(()=>{
      this.getFlowList(1)
    },50)
  }
  _separator = () => {
    return <View style={{height:10,backgroundColor:'#f0f0f0'}}/>;
  }
  _keyExtractor = (item, index) => index.toString();
  _renderItem = ({item,index}) =>{
    return(
      <Item item={item} isHistory={false} navigation={this.props.navigation}/>
    )
  }
  render(){
    return(
      <View style={{flex:1}}>
        {this.state.loading?<Loading/>:
        <View  style={{flex:1}}>
          <View style={styles.searchView}>
            {this.renderIndexLab()}
            <SearchView  placeholder='输入电站名' val={this.state.hyName} 
              search={(val)=>this.searchFlowList(val)}/>
          </View>
          <RefreshListView
            style={{flex:1}}
            data={this.state.flowList}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
            ItemSeparatorComponent={this._separator}
            refreshState={this.state.refreshState}
            onHeaderRefresh={this.onHeaderRefresh}
            onFooterRefresh={this.onFooterRefresh}
            // 可选
            footerRefreshingText= '数据加载中...'
            footerFailureText = '--数据加载失败--'
            footerNoMoreDataText= '--没有更多了--'
          />
        </View>
        }
      </View>
      
      
    )
  }
}
const styles = StyleSheet.create({
  searchView:{
    backgroundColor:'#f0f0f0'
  },
})